<template>
  <div class="app-container">
    <el-card>
      <div slot="header">
        <span v-if="questionStatus">试题录入</span>
        <span v-else>试题修改</span>
      </div>
      <!-- 主体内容 -->
      <el-form
        label-width="100px"
        :model="AddRuleForm"
        ref="ruleForm"
        class="demo-ruleForm"
        :rules="questionRules"
      >
        <el-form-item
          label="学科:"
          prop="simpleListValue"
        >
          <el-select
            v-model="AddRuleForm.simpleListValue"
            placeholder="请选择"
          >
            <el-option
              v-for="(item, index) in simpleList"
              :key="index"
              :label="item.subjectName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="目录:"
          prop="directorysListValue"
        >
          <el-select
            v-model="AddRuleForm.directorysListValue"
            placeholder="请选择"
          >
            <el-option
              v-for="(item, index) in directorysList"
              :key="index"
              :label="item.directoryName"
              :value="item.creatorID"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="企业:"
          prop="companysListValue"
        >
          <el-select
            v-model="AddRuleForm.companysListValue"
            placeholder="请选择"
          >
            <el-option
              v-for="(item, index) in companysList"
              :key="index"
              :label="item.company"
              :value="index"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="城市:"
          prop="CityListValue"
          class="cityWidth"
        >
          <el-col :span="11">
            <el-form-item prop="CityListValue">
              <el-select
                v-model="AddRuleForm.CityListValue"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, index) in provin"
                  :key="index"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item prop="sonCityAreaValue">
              <el-select
                v-model="AddRuleForm.sonCityAreaValue"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, index) in CityArea"
                  :key="index"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item
          label="方向:"
          prop="directionListValue"
        >
          <el-select
            v-model="AddRuleForm.directionListValue"
            placeholder="请选择"
          >
            <el-option
              v-for="(item, index) in directionList"
              :key="index"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="题型:"
          prop="quesRadioValue"
        >
          <el-radio-group v-model="AddRuleForm.quesRadioValue">
            <el-radio
              v-model="quesRadio"
              :label="item.label"
              v-for="(item, index) in questionType"
              :key="index"
              @change="culitRadioChange"
            ></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="难度:"
          prop="culitRadioValue"
        >
          <el-radio-group v-model="AddRuleForm.culitRadioValue">
            <el-radio
              v-model="culitRadio"
              :label="item.label"
              v-for="(item, index) in difficulty"
              :key="index"
            ></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="题干:"
          prop="quilleditorForm"
        >
          <!-- 富文本编辑器 -->
          <quill-editor v-model="AddRuleForm.quilleditorForm"> </quill-editor>
        </el-form-item>
        <!-- 选项 -->
        <el-form-item
          label="选项:"
          v-if="optionBoxFlag"
        >
          <div
            class="optionBox"
            v-for="(item, index) in AddRuleForm.AddIndexList"
            :key="index"
          >
            <el-radio
              v-if="questionDisbled"
              v-model="culitRadio"
              :label="item.code + '：'"
              @change="questionsIDValue"
            >
            </el-radio>
            <el-checkbox
              v-else
              v-model="item.id"
              :label="item.code + '：'"
              @change="questionsIDValue"
            ></el-checkbox>

            <el-input v-model="item.title"></el-input>
            <div class="photoBox">
              <el-upload
                class="upload-demo"
                action="https://jsonplaceholder.typicode.com/posts/"
                :file-list="fileList"
                list-type="picture-card"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
            </div>
          </div>
          <el-button
            type="danger"
            @click="Addusetion"
            :disabled="questionDisbled"
          >+增加选项与答案</el-button>
        </el-form-item>
        <el-form-item label="解析视频:">
          <el-input
            class="el-input-move"
            v-model="AddRuleForm.MoveInput"
            placeholder="请输入内容"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="答案解析:"
          prop="ParsingeditorForm"
        >
          <!-- 富文本编辑器 -->
          <quill-editor v-model="AddRuleForm.ParsingeditorForm"> </quill-editor>
        </el-form-item>
        <el-form-item
          label="题目备注:"
          prop="remarksTextarea"
        >
          <el-input
            class="questionWidth"
            type="textarea"
            :rows="3"
            v-model="AddRuleForm.remarksTextarea"
          >
          </el-input>
        </el-form-item>
        <el-form-item
          label="试题标签"
          prop="TestListValue"
        >
          <el-select
            multiple
            v-model="AddRuleForm.TestListValue"
            placeholder="请选择试题标签"
            class="questionWidth"
          >
            <el-option
              v-for="(item, index) in TestList"
              :key="index"
              :label="item.tagName"
              :value="item.tagName"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="submitForm('ruleForm')"
            v-if="questionStatus"
          >确认提交</el-button>
          <el-button
            type="success"
            @click="submitForm('ruleForm')"
            v-else
          >确认修改</el-button>
          <el-button
            type="primary"
            @click="resetForm('ruleForm')"
          >重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { list as simple } from '@/api/hmmm/subjects.js'
import { list } from '@/api/hmmm/directorys.js'
import { list as companyList } from '@/api/hmmm/companys.js'
import { provinces, citys } from '@/api/hmmm/citys.js'
import {
  direction,
  difficulty,
  questionType,
  EnglishAlphabet
} from '@/api/hmmm/constants.js'
import { list as tagList } from '@/api/hmmm/tags.js'
import {
  add as addQuestions,
  detail as qutionsList
} from '@/api/hmmm/questions.js'

export default {
  name: 'questionNew',
  data() {
    return {
      AddRuleForm: {
        simpleListValue: '',
        directorysListValue: '',
        companysListValue: '',
        CityListValue: '',
        directionListValue: '',
        quesRadioValue: '',
        culitRadioValue: '',
        quilleditorForm: ' ',
        ParsingeditorForm: '',
        sonCityAreaValue: '',
        MoveInput: '',
        remarksTextarea: '',
        TestListValue: '',
        AddIndexList: [
          { code: 'A', tite: '' },
          { code: 'B', title: '' },
          { code: 'C', title: '' }
        ]
      },
      simpleList: [],
      directorysList: [],
      companysList: [],
      provin: [],
      CityArea: [],
      directionList: direction,
      difficulty: difficulty,
      questionDisbled: true,
      questionType: questionType,
      quesRadio: '1',
      culitRadio: '1',
      checkouRidoe: '1',
      TestList: [],
      optionBoxFlag: true,
      EnglishAlphabet: EnglishAlphabet,
      questionStatus: true,
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      carId: this.$route.query.id,
      ridoeCheckStaes: '',
      fileList: [],
      questionRules: {
        simpleListValue: [
          { required: true, message: '请选择学科名称', trigger: 'change' }
        ],
        directorysListValue: [
          { required: true, message: '请选择目录名称', trigger: 'change' }
        ],
        companysListValue: [
          { required: true, message: '请选择企业名称', trigger: 'change' }
        ],
        CityListValue: [
          { required: true, message: '请选择城市名称', trigger: 'change' }
        ],
        sonCityAreaValue: [
          { required: true, message: '请选择城市地区名称', trigger: 'change' }
        ],
        directionListValue: [
          { required: true, message: '请选择企业名称', trigger: 'change' }
        ],
        quesRadioValue: [
          { required: true, message: '请选择题型', trigger: 'change' }
        ],
        culitRadioValue: [
          { required: true, message: '请选择题目难度', trigger: 'change' }
        ],
        quilleditorForm: [
          { required: true, message: '请输入题干', trigger: 'change' }
        ],
        ParsingeditorForm: [
          { required: true, message: '请输入答案解析', trigger: 'change' }
        ],
        TestListValue: [
          { required: true, message: '请选择试题标签', trigger: 'blur' }
        ],
        remarksTextarea: [{ message: '请填写题目备注', trigger: 'blur' }],
        title: [{ message: '请选择选项', trigger: 'blur' }]
      }
    }
  },
  async created() {
    this.getSubjectsSimple()
    this.companList()
    this.provin = provinces()
  },
  watch: {
    'AddRuleForm.simpleListValue': {
      async handler(val, oldval) {
        console.log(val)

        const { data } = await list()

        const item = data.items.filter((item) => item.subjectID === val)

        this.directorysList = item

        if (this.questionStatus) {
          this.AddRuleForm.directorysListValue = ''
          this.AddRuleForm.TestListValue = ''
        }

        const { data: target } = await tagList()
        const tagItem = target.items.filter((item) => item.subjectID === val)
        this.TestList = tagItem
      },
      deep: true
    },
    // 获取城市
    'AddRuleForm.CityListValue': {
      handler(val, oldval) {
        const city = citys(val)
        this.CityArea = city
        if (this.questionStatus) {
          this.AddRuleForm.sonCityAreaValue = ''
        }
      },
      deep: true
    },

    carId: {
      async handler() {
        // // 根据ID获取相应的目录
        if (this.carId) {
          console.log(this.carId);
          const { data } = await qutionsList({ id: this.carId })
          const edit = data

          if (edit.questionType === '1') {
            edit.questionType = '多选'
            edit.difficulty = '一般'
          }
          const tages = edit.tags.split(',')
          // console.log(tages)
          this.TestList = tages
          this.AddRuleForm = {
            simpleListValue: edit.subjectID,
            directorysListValue: edit.catalogID,
            companysListValue: edit.enterprise,
            CityListValue: edit.province,
            directionListValue: edit.direction,
            quesRadioValue: edit.questionType,
            culitRadioValue: edit.difficulty,
            quilleditorForm: edit.question,
            ParsingeditorForm: edit.answer,
            sonCityAreaValue: edit.city,
            MoveInput: edit.videoURL,
            remarksTextarea: edit.remarks,
            TestListValue: tages,
            AddIndexList: edit.options
          }
          this.questionStatus = false
          if (this.quesRadioValue === 1) {
            this.AddRuleForm.AddIndexList = this.AddRuleForm.options
          }
          if (this.AddRuleForm.quesRadioValue === 1) {
            this.AddRuleForm.quesRadioValue = '多选'
          }
        }
      },
      immediate: true
    }
  },
  methods: {
    async getSubjectsSimple() {
      try {
        const { data } = await simple({ pagesize: 20 })
        this.simpleList = data.items
      } catch (error) {
        this.$message.error('获取数据失败')
      }
    },
    async companList() {
      const { data } = await companyList()
      this.companysList = data.items
    },
    culitRadioChange(event) {
      if (event === '多选') {
        this.questionDisbled = false
        this.optionBoxFlag = true
      } else if (event === '单选') {
        this.questionDisbled = true
        this.optionBoxFlag = true
      } else {
        this.optionBoxFlag = false
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          try {
            await addQuestions({
              number: '',
              catalogID: this.AddRuleForm.directorysListValue,
              enterpriseID: this.AddRuleForm.companysListValue,
              province: this.AddRuleForm.CityListValue,
              city: this.AddRuleForm.sonCityAreaValue.toString(),
              direction: this.AddRuleForm.directionListValue,
              questionType: this.AddRuleForm.quesRadioValue,
              difficulty: this.AddRuleForm.culitRadioValue,
              question: this.AddRuleForm.quilleditorForm,
              options: [],
              videoURL: this.AddRuleForm.MoveInput,
              answer: this.AddRuleForm.ParsingeditorForm,
              remarks: this.AddRuleForm.remarksTextarea,
              tags: this.AddRuleForm.TestListValue.toString(),
              code: '1',
              field: '1',
              isPerfect: '',
              subjectID: this.AddRuleForm.simpleListValue
            })
            this.$router.push('/questions/list')
          } catch (error) {
            close.error(error)
          }
        } else {
          console.log('添加失败')
          return false
        }
      })
    },
    Addusetion() {
      console.log(this.AddIndexList.length)
      const item = this.EnglishAlphabet.filter(
        (t, index) => index === this.AddIndexList.length
      )
      this.AddIndexList.push({
        code: item,
        title: ''
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url // 图片地址
      this.dialogVisible = true
    },
    handleRemove(file) {
      this.$refs['my-upload'].clearFiles()
    },
    questionsIDValue(even) {
      console.log(even)
      console.log(1)
    }
  }
}
</script>

<style scoped lang='less'>
.container {
  padding: 0px 20px;
}
/deep/.ql-container {
  height: 200px !important;
}
.el-input-move {
  width: 40%;
}
.optionBox {
  width: 400px;
  height: 80px;
  display: flex;
  justify-content: center;
  flex-flow: row nowrap;
  align-items: center;
  .photoBox {
    position: relative;
    /deep/.el-upload-dragger {
      width: 100px;
      height: 60px;
      margin-top: 20px;
      line-height: 60px !important;
      margin-left: 10px !important;
    }
  }
  .el-icon-circle-close {
    position: absolute;
    left: 102px;
    top: 13px;
    color: #c2d1db;
    cursor: pointer;
  }
  .el-radio {
    margin: 0px !important;
  }
}
.addnew {
  width: 155px;
  height: 39px;
  background-color: #f78989;
  color: #fde6e7;
  border: 0px;
}
/deep/.questionWidth {
  width: 300px;
}
/deep/.cityWidth {
  width: 600px;
}
/deep/.el-upload--picture-card {
  width: 93px;
  height: 50px;
  line-height: 57px;
  margin-left: 10px;
}

/deep/.el-upload-list__item {
  width: 93px;
  height: 51px;
  position: absolute;
  top: 0;
  left: 0;
  margin-left: 10px;
  border-radius: 2px;
}
</style>
